<script setup>
import { onActivated, onBeforeMount, watch ,onMounted, ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";

import {
  getInfoAPI,
  getUserInfoAPI,
  getShopBalancedAPI,
  getItemIdByUserIdAPI,
} from "@/server/api/userInfo";
import {
  selectAllAddressAPI,
  deleteBuyerDataByIdAPI,
  updateBuyerDataByIdAPI,
  faultAddressAIP,
} from "@/server/api/BuyerData";
import { getUploadBalance } from "@/server/api/itemInfo";

import { useUseStore } from "@/stores/user";
import { ItemShopStore } from "@/stores/ItemAnShop";
import { useIndexStore } from "@/stores/indexStore";

import { OpenChildrenPage } from "@/hook/routerHandle";
import { ToastFun } from "@/hook/toast";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

const ItemShop = ItemShopStore();
const router = useRouter();
let userId = useUseStore().userId; // 用户Id

// 定义获取地址方法
const selectAllAddress = async () => {
  const res = await selectAllAddressAPI(userId);
  addersList.value = res.data.data;
};

// 定义修改地址发方法
const updateBuyerDataById = async (data) => {
  const res = await updateBuyerDataByIdAPI(data);
  if(res.data.code === 200){
    selectAllAddress();
  }
};

// 定义修改默认地址发方法
const faultAddress = async (id) => {
  const res = await faultAddressAIP(id);
};

// 定义地址删除方法
const deleteBuyerDataById = async (id) => {
  const res = await deleteBuyerDataByIdAPI(id);
};

const close = (index) => {
  const id = addersList.value[index].buyerDataId;
  addersList.value.splice(index, 1);
  deleteBuyerDataById(id);
};

/*
&地址逻辑开始
*/
// 定义状态是否是修改
const addState = ref(false);
const indexAie = ref(0);
// 地址添加信息
// 零时存储地址方法
const addFrom = ref({
  userName: "",
  address: "",
  phone: "",
});
// 定义初始化地址信息
const addressFrom = ref({});
let baseUrl = useUseStore().ing;

// 优化后的代码
const onSubmit = () => {
  const { address, buyerDataId, phone } = addFrom.value;
  const data = {
    address,
    buyerDataId,
    phone,
    userId,
    userName: addFrom.value.userName,
  };

  updateBuyerDataById(data);


  // 清空临时存储
  addFrom.value = {
    userName: "",
    address: "",
    phone: "",
  };

  // 关闭弹窗
  showCenter.value = false;
};

// 点击修改按钮
const resAdders = (index) => {
  addState.value = true;
  showCenter.value = true;
  addFrom.value = addersList.value[index];
};
// 定义地址列表
const addersList = ref([]);

//定义修改（初始）地址方法
const handoffAdders = (id) => {
  // 拿到id的数组下标
  // 拿到地址的id
  const index = addersList.value.findIndex((item) => item.buyerDataId === id);
  if (index !== -1) {
    indexAie.value = index;
    faultAddress(addersList.value[index].buyerDataId);
    addressFrom.value = addersList.value[index];
  }
};

/*
&地址逻辑结束
*/
/*
定义页面栏目跳转逻辑开始

*/
// 定义用户选项列表
const buyersList = ref([
  { price: "/images/Me/矩形_6@2x.png", title: "me.buyersCenter.orders" },
  {
    price: "/images/Me/矩形_6@2x (1).png",
    title: "me.buyersCenter.collection",
  },
  {
    price: "/images/Me/矩形_6@2x (2).png",
    title: "me.buyersCenter.storeAttention",
  },
  { price: "/images/Me/矩形_6@2x (3).png", title: "me.buyersCenter.history" },
]);

const Seller = ref([
  { price: "/images/Me/矩形_6@2x (4).png", title: "me.sellerCenter.publish" },
  // {
  //   price: "/images/Me/提醒@2x.png",
  //   title: "me.sellerCenter.applicationRecords",
  // },
  {
    price: "/images/Me/全部@2x.png",
    title: "me.sellerCenter.manageShop",
  },
]);

//上栏跳转
const userRouterBuyers = (index) => {
  const routes = {
    0: "ItemBuyer",
    1: "Collection",
    2: "StoreAttention",
    3: "History",
  };

  const route = routes[index];
  if (route) {
    router.push(route);
  }
};

// 二栏跳转
const userRouterSeller = (index, item) => {
  const routerMappings = [
    { item: "PublishStore", noItem: "ItemSeller" },
    // { item: "ViewShop", noItem: "AppllcatlionRecords" },
    { item: "ManageShop", noItem: "ManageItem" },
  ];

  const routerPath = item
    ? routerMappings[index].item
    : routerMappings[index].noItem;
  router.push(routerPath);
};

const showPopover = ref(false);

// 设置栏数据
const actions = [
  { text: "地址管理", icon: "location-o" },
  { text: t("me.signOut"), icon: "exchange" },
];
const isState = ref(true);

// 设置跳转函数
const onSelect = (action) => {
  switch (action.icon) {
    case "location-o":
      isState.value = true;
      break;
    default:
      loginOut();
      return;
  }
  showBottom.value = true;
};

let showBottom = ref(false); // 控制t弹出层样式
const showCenter = ref(false);

/*
定义页面栏目跳转逻辑开始
*/
const userInfome = ref({});

//定义退出登录方法
const loginOut = () => {
  useUseStore().token = "";
  useUseStore().itemId = "";
  useUseStore().Upload = "";
  useUseStore().shopUpload = "";
  useUseStore().activityInfo = null;
  useUseStore().showTip = true;
  useUseStore().userId = null;
  useUseStore().userInfo = {};
  router.push("/loginHome");
};

// 获取页面Pl(钱)信息方法
const getInfo = async () => {
  const res = await getInfoAPI(userId);
  userInfome.value = res.data.data;
};

// 监听 money（pointBalance）的变化
watch(() => userInfome.value.pointBalance, (newValue, oldValue) => {
  console.log('Money changed from', oldValue, 'to', newValue);
  // 你可以在这里执行其他操作，例如更新 UI，调用其他方法等

});

//添加次数函数
const getUploadAdd = () => {
  showToast(t("me.tips1"));
};

// 跳转充值页面
const goRecharge = () => {
  const { pointBalance, frozenBalance } = userInfome.value;
  router.push({
    path: "/recharge",
    query: { pointBalance, frozenBalance },
  });
};

const backgroundColor = [
  "linear-gradient(227deg, rgb(251 252 82 / 43%) 0%, rgb(255 255 255 / 0%) 100%), linear-gradient(134deg, rgb(254 226 134 / 74%) 0%, rgba(241, 246, 245, 0) 100%)",
  "linear-gradient(225.83deg, rgba(168, 255, 236, 0.43) 0%, rgba(245, 245, 245, 0) 100%), linear-gradient(147.41deg, rgba(211, 209, 255, 1) 0%, rgba(245, 245, 245, 0) 100%",
];

// 获取用户数据
const getUserInfo = async () => {
  const res = await getUserInfoAPI(userId);
  console.log("用户数据", res.data.data);
  // let Imglist = res.data.data.userImage.split(".");
  // let Imglist = null;

  // if (res.data.data.userImage) {
  //   Imglist = res.data.data.userImage.split(".");
  //   res.data.data.userImage = baseUrl + Imglist[0] + "_80_80." + Imglist[1];
  //   // useUseStore().userInfo = res.data.data;
  //   // useIndexStore().isRequird = false;
  // }
  useUseStore().userInfo = res.data.data;
  useIndexStore().isRequird = false;
};

// 获取用户itemId
const getItemIdByUserId = async () => {
  const { data } = await getItemIdByUserIdAPI(userId);

  if (data.code == 200 && data.data !== null) {
    useUseStore().itemId = data.data;

    getUpload(); // 获取item上架次数调用
  }
};

// 获取item次数 网店额度
const getUpload = async () => {
  const res = await getUploadBalance(useUseStore().itemId);
  useUseStore().Upload = res.data.data;
};

// 获取shop次树 实体店额度
const getShopBalanced = async () => {
  const res = await getShopBalancedAPI(userId);
  useUseStore().shopUpload = res.data.data;
};

// 跳转发布网页商品页面前的判断
const toPersonalPosting = () => {
  if (!useUseStore().userInfo.country) {
    ToastFun("show", {
      msg: t("meView.country"),
    });

    return;
  }

  if (useUseStore().Upload <= 0) {
    ToastFun("show", {
      msg: t("meView.notEnough"),
    });

    return;
  }

  router.push("addshop");
};

onActivated(() => {
  selectAllAddress();  // 查询个人地址调用
  getInfo(); // 获取页面Pl(钱)信息方法
});

onMounted(() => {
  getUserInfo(); // 获取个人信息
  getInfo(); // 获取页面Pl(钱)信息方法
  getItemIdByUserId(); // 掉用itemID接口
  getShopBalanced(); // 获取shop上架次数调用
  selectAllAddress(); // 查询个人地址调用
});
</script>

<template>
  <div class="meHome">
    <div style="position: absolute; width: 100vw; z-index: 999">
      <div :class="['topBottom', useIndexStore().isRtl ? 'is_rtl' : '']">
        <img
          src="/images/Me/scaner.png"
          alt=""
          class="scaner"
          @click="OpenChildrenPage('/qrcodeScaner', { flag: true })"
        />

        <div class="back">
          <van-popover
            v-model:show="showPopover"
            placement="bottom-end"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="setting-o" size="25" />
            </template>
          </van-popover>

          <van-popup
            :style="{ height: '92%' }"
            v-model:show="showBottom"
            position="bottom"
            class="popup"
          >
            <!-- 关闭弹窗按钮 -->
            <div class="btn">
              <img
                @click="showBottom = false"
                src="/images/Home/语言切换面板按钮.png"
                alt=""
              />
            </div>

            <div class="setUpView_adders" v-show="isState">
              <ul class="addersList">
                <li
                  v-for="(item, index) in addersList"
                  :key="index"
                  :class="{ border: index == indexAie }"
                  @click="handoffAdders(item.buyerDataId)"
                >
                  <p class="ellipsis-2">
                    {{ item.address }}
                    <van-icon
                      style="float: right; line-height: 30rem"
                      @click="close(index)"
                      name="close"
                      size="20"
                    />
                  </p>
                  <div class="footer_en">
                    <div class="info">
                      <div class="name">{{ item.userName }}</div>
                      <div class="date">{{ item.phone }}</div>
                    </div>
                    <div class="text_right cut-txt" @click="resAdders(index)">
                      {{ $t("me.modify") }}
                    </div>
                  </div>
                </li>
              </ul>

              <!-- 修改地址弹窗 -->
              <van-popup v-model:show="showCenter" class="modify" round>
                <van-form>
                  <van-cell-group inset>
                    <van-field
                      name="name"
                      :label="$t('me.addNewAddress.name')"
                      :placeholder="$t('me.addNewAddress.name')"
                      v-model="addFrom.userName"
                      :rules="[
                        {
                          required: true,
                          message: $t('me.addNewAddress.name'),
                        },
                      ]"
                    />

                    <van-field
                      type="text"
                      name="address"
                      v-model="addFrom.address"
                      :label="$t('me.addNewAddress.address')"
                      :placeholder="$t('me.addNewAddress.address')"
                      :rules="[
                        {
                          required: true,
                          message: $t('me.addNewAddress.address'),
                        },
                      ]"
                    />

                    <van-field
                      v-model="addFrom.phone"
                      name="phone"
                      type="phone"
                      :label="$t('me.addNewAddress.phone')"
                      :placeholder="$t('me.addNewAddress.phone')"
                      :rules="[
                        {
                          required: true,
                          message: $t('me.addNewAddress.phone'),
                        },
                      ]"
                    />
                  </van-cell-group>

                  <div style="margin: 16rem">
                    <div class="modifyBtn" @click="onSubmit">
                     确认
                    </div>
                  </div>
                </van-form>
              </van-popup>

              <!-- 添加按钮 -->
              <div class="footer">
                <footer @click="$router.push('AddNewAddress')">
                  <div class="icon">+</div>
                  {{ $t("me.addAddress") }}
                </footer>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>

    <header
      :style="{
        padding: '40rem 10rem 10rem 10rem',
        boxSizing: 'border-box',
        width: '100%',
        background:
          ItemShop.IdtStatus == 'item'
            ? backgroundColor[0]
            : backgroundColor[1],
      }"
    >
      <!-- 顶部返回按钮 -->

      <!-- 头部信息 -->
      <div class="header" v-if="useUseStore().userInfo">
        <div class="login">
          <img
            :src="
              useUseStore().userInfo.userImage || '/images/pipayshop_logo.png'
            "
            alt=""
          />
        </div>

        <div class="text-title">
          <h5>{{ useUseStore().userInfo.userName }}</h5>
          <span class="Email"> {{ useUseStore().userInfo.email }} </span>
        </div>
        <div class="header_button" @click="$router.push('MyInformation')">
          {{ $t("me.edit") }}
        </div>
      </div>

      <!-- 钱包模块 -->
      <div class="purse">
        <div class="add_money" @click="goRecharge">+</div>

        <div class="text-title">
          <h5 class="money_number">{{ userInfome?.pointBalance }}</h5>
          <span class="teed"> {{ $t("me.add") }} </span>
        </div>

        <div class="Igz_number">
          Pi
          <!-- {{ userInfome.piBalance }} -->
        </div>
      </div>

     
    </header>

    <!-- 主体模块 -->
    <main>
      <div class="handoff-btn">
        <div
          class="btn"
          @click="ItemShop.ItemStatus()"
          :class="{ active: ItemShop.IdtStatus == 'item' }"
        >
          {{ $t("me.item") }}
        </div>
        <div
          class="btn"
          :class="{ active: ItemShop.IdtStatus == 'shop' }"
          @click="ItemShop.ShopStatus()"
        >
          {{ $t("me.shop") }}
        </div>
      </div>
      <!-- 发布模块 -->
      <div class="publish">
        <!-- 发布商品 网店-->
        <div class="item"  v-show="ItemShop.IdtStatus === 'item'">
          <div
            class="item_title"
            @click="
              $router.push({ path: 'Charged', query: { ItpStore: 0 } });
              ItemShop.IdtStatus = 'item';
            "
          >
            <div class="text">
              {{ $t("me.quota") }}: {{ useUseStore().Upload }}
            </div>
            <div class="item_hd_bottom">
              <van-icon
                name="arrow"
                :class="[useIndexStore().isRtl ? 'trun_180' : '']"
              />
            </div>
          </div>
          <div class="item_ad" @click="toPersonalPosting()">
            <div class="item_content">
              <div class="icon">+</div>
              {{ $t("me.scheduled") }}
            </div>
          </div>
        </div>

        <!-- 发布店铺 实体店 -->
        <div class="item" v-show="ItemShop.IdtStatus === 'shop'">
          <div
            class="item_title"
            @click="
              $router.push({ path: 'Charged', query: { ItpStore: 1 } });
              ItemShop.IdtStatus = 'shop';
            "
          >
            <div class="text">
              {{ $t("me.quota") }}: {{ useUseStore().shopUpload }}
            </div>
            <div class="item_hd_bottom">
              <van-icon
                name="arrow"
                :class="[useIndexStore().isRtl ? 'trun_180' : '']"
              />
            </div>
          </div>
          <div class="item_ad">
            <div
              class="item_content"
              @click="
                useUseStore().shopUpload > 0
                  ? $router.push('/StorePosting')
                  : getUploadAdd()
              "
            >
              <div class="icon">+</div>
              {{ $t("me.shop") }}
            </div>
            <div
              class="item_content"
              @click="
                useUseStore().shopUpload > 0
                  ? $router.push('PostingShopList')
                  : getUploadAdd()
              "
            >
              <div class="icon">+</div>
              {{ $t("me.scheduled") }}
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li v-show="ItemShop.IdtStatus == 'item'">
          <!-- 个人模块 -->
          <div class="PersonalModule">
            <div class="personal_hd">
              <h5 class="title">{{ $t("me.buyersCenter.title") }}</h5>
              <div class="back">
                <van-icon
                  name="arrow"
                  :class="[useIndexStore().isRtl ? 'trun_180' : '']"
                />
              </div>
            </div>

            <ul class="personal_ad">
              <li
                v-for="(item, index) in buyersList"
                :key="index"
                @click="userRouterBuyers(index)"
              >
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img :src="item.price" alt="" />
                  </div>
                  <div class="text">{{ $t(item.title) }}</div>
                </div>
              </li>
            </ul>
          </div>

          <!--商家模块 -->
          <div class="PersonalModule">
            <div class="personal_hd">
              <h5 class="title">{{ $t("me.sellerCenter.title") }}</h5>
              <div class="back">
                <van-icon
                  name="arrow"
                  :class="[useIndexStore().isRtl ? 'trun_180' : '']"
                />
              </div>
            </div>

            <ul class="personal_ad row_2">
              <li
                v-for="(i, index) in Seller"
                :key="index"
                @click="userRouterSeller(index)"
              >
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img :src="i.price" alt="" />
                  </div>
                  <div class="text">
                    {{ $t(i.title) }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>

        <li v-show="ItemShop.IdtStatus == 'shop'">
          <!-- 个人模块 -->
          <div class="PersonalModule">
            <div class="personal_hd">
              <h5 class="title">{{ $t("me.buyersCenter.title") }}</h5>
              <div class="black">
                <van-icon
                  name="arrow"
                  :class="[useIndexStore().isRtl ? 'trun_180' : '']"
                />
              </div>
            </div>
            <ul class="personal_ad">
              <li
                v-for="(item, index) in buyersList"
                :key="index"
                @click="userRouterBuyers(index)"
              >
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img :src="item.price" alt="" />
                  </div>
                  <div class="text">{{ $t(item.title) }}</div>
                </div>
              </li>
            </ul>
          </div>

          <!--商家模块 -->
          <div class="PersonalModule">
            <div class="personal_hd">
              <h5 class="title">{{ $t("me.sellerCenter.title") }}</h5>
              <div class="black">
                <van-icon
                  name="arrow"
                  :class="[useIndexStore().isRtl ? 'trun_180' : '']"
                />
              </div>
            </div>
            <ul class="personal_ad row_2">
              <li
                v-for="(i, index) in Seller"
                :key="index"
                @click="userRouterSeller(index, 1)"
              >
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img :src="i.price" alt="" />
                  </div>
                  <div class="text">
                    {{ $t(i.title) }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <!-- <li>
        //  商家模块
          <div class="PersonalModule">
            <div class="personal_hd">
              <h5 class="title">Web 3.0</h5>
              <div class="black">
                <van-icon
                  name="arrow"
                  :class="[useIndexStore().isRtl ? 'trun_180' : '']"
                />
              </div>
            </div>
            <ul class="personal_ad row_2">
              <li @click="router.push('/future')">
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img src="\images\Me\合约.svg" alt="" />
                  </div>
                  <div class="text">{{ $t("FlowerFuture.title") }}</div>
                </div>
              </li>

              <li @click="router.push('/futurePiHistory')">
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <img src="\images\Me\历史合约.svg" alt="" />
                  </div>
                  <div class="text">{{ $t("protocolHistory.record") }}</div>
                </div>
              </li>
              // 广告投放
              <li>
                <div class="perSonal_content">
                  <div class="perSonal_login">
                    <van-icon name="video-o" size="40rem" />
                  </div>
                  <div class="text">广告投放</div>
                </div>
              </li>
            </ul>
          </div>
        </li> -->
      </ul>
    </main>
  </div>
</template>

<style>
.van-toast--middle {
  background-color: #444 !important;
}
</style>

<style lang="scss" scoped>
.meHome {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14rem;

  padding-bottom: 60rem;

  width: 100%;
  height: auto;
  box-sizing: border-box;

  .topBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10rem 12rem 0;
    line-height: 38rem;
    height: 38rem;
    border-radius: 5rem;

    &.is_rtl {
      flex-direction: row-reverse;
    }

    .scaner {
      width: 24rem;
      height: 24rem;
    }

    .back {
      :deep(.van-popup) {
        border-radius: 12rem 12rem 0rem 0rem;
        overflow: hidden;
        background: #f5f5f5;

        .btn {
          display: flex;
          justify-content: center;
          padding: 16rem 0 28rem;

          > img {
            width: 37rem;
            height: 8rem;
          }
        }

        .addersList {
          padding-top: 20rem;
          height: 65vh;
          overflow: auto;

          :deep(.van-field__label) {
            width: auto;
          }

          li {
            box-sizing: border-box;
            width: 90%;
            margin: 10rem auto;
            background-color: #ffffff;
            border-radius: 10rem;
            padding: 10rem 15rem;
            border: 1rem solid transparent;

            .top-cont {
              display: flex;
              justify-content: space-between;

              input {
                vertical-align: middle;
                margin-left: 5rem;
              }

              p {
                width: 70%;
                font-size: 16rem;
                line-height: 30rem;
              }
            }

            .footer_en {
              display: flex;
              justify-content: space-between;

              .info {
                color: #ccc;
                display: flex;
                font-size: 16rem;
                line-height: 30rem;

                .name {
                  margin-right: 10rem;
                }
              }

              .text_right {
                max-width: 70rem;
                white-space: nowrap;

                color: #fff;
                padding: 0rem 20rem;
                background: #642e8eff;
                border: 2rem solid;
                border-radius: 5rem;
              }
            }

            &.border {
              border: 1rem solid #642e8eff;
            }
          }
        }

        .footer {
          footer {
            background-color: #642e8e;
            position: fixed;
            bottom: 60rem;
            left: 0rem;
            right: 0;
            margin: 0 20rem;
            height: 50rem;
            display: flex;
            justify-content: center;
            color: #fff;
            border: 2rem solid;
            border-radius: 10rem;
            font-size: 18rem;
            align-items: center;

            .icon {
              margin-right: 10rem;
              width: 25rem;
              height: 25rem;
              text-align: center;
              line-height: 25rem;
              border: 2rem solid;
              color: #fff;
              border-radius: 50%;
              font-size: 20rem;
            }
          }
        }

        .modify {
          padding-top: 10rem;
          border-radius: 10rem;

          .modifyBtn {
            border-radius: 20rem;
            text-align: center;
            padding: 3rem 0;

            background: #642e8e;
            color: #fff;
          }
        }

        .setUpView {
          z-index: 10;
          width: 100%;

          .select {
            padding: 12rem 0 12rem 12rem;
            background: #fff;

            display: flex;
            align-items: center;

            span {
              font-size: 14rem;
              line-height: 20rem;
              font-weight: 500;

              &.selected {
                font-size: 12rem;
                font-weight: 400;
                line-height: 16rem;
                margin-left: 12rem;
              }
            }
          }

          .content {
            > .item {
              padding: 12rem 0 12rem 12rem;
              background: #fff;
            }
          }
        }
      }
    }
  }

  .header {
    padding: 10rem 0;
    display: flex;
    height: 60rem;

    .login {
      text-align: center;
      line-height: 55rem;
      width: 55rem;
      height: 55rem;
      overflow: hidden;
      border-radius: 50%;
      background-color: #ccc;

      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .text-title {
      padding: 0 10rem;
      line-height: 30rem;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h5 {
        font-size: 20rem;
        font-weight: 500;
      }

      .Email {
        color: #ccc;
        font-weight: 500;

        max-width: 150rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .header_button {
      color: rgba(100, 46, 142, 1);
      margin-top: 10rem;
      width: 150rem;
      text-align: center;
      height: 35rem;
      line-height: 35rem;
      margin-left: auto;
      border-radius: 20rem;
      border: 1rem solid;
    }
  }

  .purse {
    position: relative;
    color: #fff;
    border-radius: 15rem;
    display: flex;
    height: 60rem;
    padding: 10rem;
    background: linear-gradient(
      145.05deg,
      rgba(252, 129, 129, 1) 0%,
      rgba(172, 71, 255, 1) 100%
    );

    .add_money {
      background-color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 30rem;
      border-radius: 10rem;
      padding: 10rem 30rem;
      color: #000;
    }

    .text-title {
      padding: 0 10rem;
      line-height: 30rem;

      .money_number {
        font-size: 20rem;
        font-weight: 500;

        i {
          font-size: 12rem;
        }
      }

      .teed {
        color: #e6e6e6;
        font-weight: 500;
        font-size: 14rem;
      }
    }

    .Igz_number {
      position: absolute;
      right: 10rem;
      bottom: 10rem;
      font-size: 14rem;
    }
  }

  .publish {
    display: flex;
    justify-content: space-between;

    .item {
      margin-top: 15rem;
      overflow: hidden;
      border-radius: 10rem;
      width: 48%;

      &:last-child {
        .item_title {
          background-color: rgba(56, 129, 255, 1);
        }

        .item_ad {
          display: flex;
          justify-content: space-evenly;
          background-color: rgba(56, 129, 255, 0.3);

          .item_content {
            color: rgba(56, 129, 255, 1);
          }
        }
      }

      .item_title {
        background-color: rgba(255, 195, 0, 1);
        display: flex;
        justify-content: space-between;
        color: #fff;
        padding: 10rem 10rem;

        .item_hd_bottom {
          width: 20rem;
          height: 20rem;
          border-radius: 4rem;
        }
      }

      .item_ad {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        height: 80rem;
        background: rgba(255, 195, 0, 0.3);

        padding: 0 8rem;

        .item_content {
          display: flex;
          justify-content: center;
          align-items: center;

          text-align: center;
          font-weight: 500;
          font-size: 16rem;
          line-height: 16rem;
          color: rgba(255, 195, 0, 1);

          &:nth-of-type(2) {
            margin-left: 5rem;
          }

          .icon {
            margin-right: 5rem;
            text-align: center;
            line-height: 20rem;
            width: 20rem;
            height: 20rem;
            border-radius: 50%;
            border: 1rem solid;

            flex-shrink: 0;
          }
        }
      }
    }
  }

  main {
    padding: 0 10rem;

    .handoff-btn {
      display: flex;
      padding: 20rem 10rem;
      max-width: 100%;
      overflow-x: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      .btn {
        height: 32rem;
        transition: all 0.5s;

        text-align: center;
        white-space: nowrap;
        line-height: 32rem;
        border-radius: 20rem;
        color: #ccc;
        font-size: 16rem;

        position: relative;
        background-color: transparent;

        padding: 2rem 10rem;

        &:last-child {
          background-color: transparent;
          margin-left: 20rem;

          &:hover {
            background-color: #3881ff;
            font-size: 24rem;
            color: #ffffff;
          }

          &.active {
            font-size: 24rem !important;
            color: #ffffff !important;
            background-color: #3881ff;
          }
        }

        &.active {
          font-size: 20rem !important;
          color: #ffffff !important;
          background-color: #ffc300;
        }
      }
    }

    ul {
      li {
        .PersonalModule {
          padding: 10rem;
          margin-top: 20rem;
          background-color: #ffffff;
          box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.1);
          -webkit-box-shadow: 0rem 2rem 4rem 0 rgba(0, 0, 0, 0.1);
          border-radius: 12rem;

          .personal_hd {
            display: flex;
            justify-content: space-between;

            .title {
              font-size: 16rem;
            }

            .black {
              width: 20rem;
              height: 20rem;
              border-radius: 4rem;
            }
          }

          .personal_ad {
            overflow: auto;
            padding: 20rem 0;
            display: flex;
            justify-content: space-around;

            .lis,
            li {
              text-align: center;
              width: 20%;

              .perSonal_content {
                display: flex;
                flex-direction: column;
                align-items: center;
              }

              .perSonal_login {
                border-radius: 6rem;
                width: 40rem;
                height: 40rem;

                img {
                  width: 100%;
                }
              }
            }
          }

          .row_2 {
            justify-content: start;

            li {
              width: 25%;
            }
          }
        }
      }
    }
  }
}
</style>
